<template>
  <div class="gray-page record-page log-page">
    <nav-bar title="巡查走访记录" theme="white"></nav-bar>
    <div class="page-main">
      <van-sticky :offset-top="44">
        <van-tabs v-model="active">
          <van-tab title="网格巡查记录" name="grid-record">
            <div class="main-container-bottom-table">
              <van-row class="table-body-item" v-for="(item, index) in tableData1" :key="index">
                <van-col :span="10" align="center">
                  <p>
                    <van-icon name="notes-o" />
                    {{ item.inspectionDate }}
                  </p>
                </van-col>
                <van-col :span="4" align="center">
                  <p>{{ item.weekday }}</p>
                </van-col>
                <van-col :span="6" align="center" :offset="4">
                  <p class="operation" @click="handleTableDetail1(item)"><van-icon name="arrow" /></p>
                </van-col>
              </van-row>
            </div>
          </van-tab>
          <van-tab title="单位巡查记录" name="company-record">
            <div class="main-container-bottom-table">
              <van-row class="table-header">
                <van-col :span="8" align="center">重点单位名称</van-col>
                <van-col :span="10" align="center">上次巡查时间</van-col>
                <van-col :span="6" align="center">操作</van-col>
              </van-row>
              <van-row class="table-body-item" v-for="(item, index) in tableData2" :key="index">
                <van-col :span="8" align="center">
                  <p>{{ item.companyName }}</p>
                </van-col>
                <van-col :span="10" align="center">
                  <p>{{ item.inspectionTime }}</p>
                </van-col>
                <van-col :span="6" align="center">
                  <p class="operation" @click="handleTableDetail2(item)">查看</p>
                </van-col>
              </van-row>
            </div>
          </van-tab>
          <van-tab title="人员走访记录" name="person-record">
            <div class="main-container-bottom-table">
              <van-row class="table-header">
                <van-col :span="8" align="center">走访人员姓名</van-col>
                <van-col :span="10" align="center">上次走访时间</van-col>
                <van-col :span="6" align="center">操作</van-col>
              </van-row>
              <van-row class="table-body-item" v-for="(item, index) in tableData3" :key="index">
                <van-col :span="8" align="center">
                  <p>{{ item.intervieweeName }}</p>
                </van-col>
                <van-col :span="10" align="center">
                  <p>{{ item.interviewTime }}</p>
                </van-col>
                <van-col :span="6" align="center">
                  <p class="operation" @click="handleTableDetail3(item)">查看</p>
                </van-col>
              </van-row>
            </div>
          </van-tab>
        </van-tabs>
      </van-sticky>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cockpit from '@/api/cockpit'
export default {
  data() {
    return {
      gridCode: '',
      appCode: '',
      active: 'grid-record',
      tableData1: [],
      tableData2: [],
      tableData3: []
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.gridCode = this.$route.query.gridCode
    this.appCode = this.$route.query.appCode
  },
  mounted() {
    this.gridInit()
    this.companyInit()
    this.personInit()
  },
  methods: {
    gridInit() {
      const params = {
        type: 1,
        gridCode: '',
        inspectionPointCode: '',
        startTime: '',
        appCode: this.appCode,
        endTime: ''
      }
      Cockpit.GridMember.gridList(params).then(res => {
        const { status, data } = res
        if (status === 200) {
          this.tableData1 = data.data
        }
      })
    },
    companyInit() {
      const params = {
        gridCode: '',
        appCode: this.appCode,
        // gridCode: 'E90081AF555A41E4',
        companyType: '',
        inspectionResult: '',
        companyCode: '',
        startTime: '',
        endTime: ''
      }
      Cockpit.GridMember.companyList(params).then(res => {
        if (res.status === 200) {
          this.tableData2 = res.data.data
        } else {
          this.$toast.error(res.data.message)
        }
      })
    },
    personInit() {
      const params = {
        appCode: this.appCode,
        regionCode: this.user.regionCode,
        name: '',
        phone: '',
        startTime: '',
        endTime: '',
        type: '',
        interviewee: '',
        labelName: '',
        pageSize: 10,
        recordSize: 0
      }
      Cockpit.GridMember.personList(params).then(res => {
        const { status, data } = res
        if (status === 200) {
          this.tableData3 = data.data.list
        }
      })
    },
    handleTableDetail1(item) {
      // console.log(item, '787878')
      this.$router.push({
        path: '/inspectvisit/inspect/record/list',
        query: {
          gridCode: item.gridCode,
          date: item.inspectionDate,
          appCode: item.appCode
        }
      })
    },
    handleTableDetail2(item) {
      this.$router.push({
        path: '/cockpit/gridMember/company',
        query: {
          code: item.code
        }
      })
    },
    handleTableDetail3(item) {
      this.$router.push({
        path: '/cockpit/gridMember/person',
        query: {
          code: item.code,
          idCard: item.idCard
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main-container {
  width: 100%;
  padding-top: 44px;
  background-color: #f6f6f6;
  &-bottom {
    padding: 0 30px;
    background-color: #fff;
    margin-top: 20px;
    &-header {
      height: 100px;
      line-height: 100px;
      display: flex;
      justify-content: space-between;
    }
    &-table {
      padding: 0 30px;
      .table-header {
        height: 100px;
        line-height: 100px;
        background-color: #e28556;
        font-size: 30px;
        padding: 0 10px;
        color: #fff;
      }
      .table-body-item {
        height: 100px;
        line-height: 100px;
        padding: 0 10px;
        font-size: 30px;
        p {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        &:nth-child(2n + 1) {
          background-color: #f3f3f3;
        }
        .operation {
          color: #37c2bb;
        }
      }
    }
  }
}
</style>
